<template>
    <div>
        <el-dialog :title="form.id?'修改角色':'添加角色'" :visible.sync="dialogVisible" width="45%" :before-close="handleClose"
            center>
            <el-form ref="form" :model="form" label-width="100px" style="margin-left:100px" label-position="left">
                <el-form-item label="账号:">
                    <el-input v-model="form.name" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="角色:">
                    <div v-for="(item, index) in menulist" :key="index">
                        <el-checkbox v-model="item.checked" @change="handleCheckAllChange($event, item)">
                            {{ item.name }}
                        </el-checkbox>
                        <el-checkbox-group v-model="checkedMenus" @change="handleCheckedCitiesChange($event, item)">
                            <el-checkbox v-for="(it, k) in item['children']" :key="k" :label="it.id">
                                {{ it.name }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="qu">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { menlist, addrole } from '@/api/administratorrole'
export default {
    props: {
        dialogVisible: {
            type: Boolean,
            default: () => { }
        },
        handleClickdata: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            form: {
                id: 0,
                name: '',
                menus: {}
            },
            checked: "",
            checkedMenus: [],
            menulist: []
        };
    },
    created() {
        this.getmenlist()
    },
    watch: {
        handleClickdata: {
            async handler(val) {
                if (val) {
                    Object.keys(this.form).forEach(key => {
                        this.form[key] = val[key]
                    })
                    await this.getmenlist({ roleid: val.id })
                }
                if (val) {
                    const arr = []
                    this.menulist.forEach(item => {
                        const list = item.children.map(item1 => {
                            if (item1.checked === 1) {
                                return item1.id
                            }

                        })
                        list.forEach(item => arr.push(item))
                        this.handleCheckedCitiesChange(list,item)
                    })
                    this.checkedMenus = arr
                }
            },
            immediate: true
        }
    },
    methods: {
        async getmenlist(roleid = { roleid: 0 }) {

            let res = await menlist(roleid)
            if (res.errCode == 10000) {
                this.menulist = res.data.list
            }
        },
        async add() {
            this.form.menus = this.checkedMenus.map(id => { return { id } })
            let res = await addrole(this.form)
            if (res.errCode == 10000) {
                let msg = this.form.id?'修改成功':'添加成功'
                this.$message({
                    message:msg,
                    type: 'success',
                });
            }
            this.$emit("isclose", false, true, {})
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.$emit("isclose", false, {})
                })
                .catch(_ => { });
        },
        handleCheckAllChange(val, item) {
            item.checked = val
            let menuid = item.children.map(v => v.id)
            if (val) {
                this.checkedMenus = this.checkedMenus.concat(menuid)
            } else {
                this.checkedMenus = this.checkedMenus.filter(val => !menuid.includes(val))
            }
        },
        handleCheckedCitiesChange(value, item) {
            //filter 过滤
            //控制父级复选框 是否选中
            item.checked = item.children.filter(v => value.includes(v.id)).length === item.children.length 
            // if (item.checked) {
            //     this.checkData.push(item.id)
            // } else {
            //     //删除父id
            //     this.checkData = this.checkData.filter(val => val != item.id)
            // }
        },
        qu() {
            this.$emit("isclose", false, {})
        }
    }
}
</script>

<style lang="less" scoped>

</style>